<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .swiper{
            width: 500px;
            height: 300px;
            position: relative;
        }
        .swiper .swiper-container{
            width: 100%;
            position: relative;
        }
        .swiper .swiper-container img{
            position: absolute;
            left: 0;
            width: 100%;
            /* display: none; */
            opacity: 0;
            transition: all 0.3s;
        }
        .swiper .swiper-container img.active{
            opacity: 1;
            /* display: block; */
        }
        .swiper .swiper-dot{
            position: absolute;
            left: 50%;
            bottom: 10px;
            transform: translateX(-50%);
        }
        .swiper .swiper-dot span{
            display: inline-block;
            width: 20px;
            height: 20px;
            background-color: white;
            border-radius: 50%;
            margin-right: 10px;
            transition: all 0.3s;
        }
        .swiper .swiper-dot span.active{
            background-color: red;
        }
        .swiper .left{
            background-color: white;
            padding: 5px;
            cursor: pointer;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }
        .swiper .right{
            background-color: white;
            padding: 5px;
            cursor: pointer;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>

<body>
    <div class="swiper1 swiper">
        <!-- 放置轮播图片 -->
        <div class="swiper-container">
            
        </div>
        <!-- 放置小圆点(指示器) -->
        <div class="swiper-dot">
            
        </div>
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
    </div>

    <div class="swiper2 swiper">
        <!-- 放置轮播图片 -->
        <div class="swiper-container">
            
        </div>
        <!-- 放置小圆点(指示器) -->
        <div class="swiper-dot">
            
        </div>
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
    </div>

    <script>
        //定义class , 将创建轮播图的过程封装起来 , 将来可以创建轮播图对象
        class Swiper{
            constructor(el, data){
                //给对象添加属性
                this.data = data;//保存轮播图的数据
                this.dom = document.querySelector(el);//保存dom节点
                this.timerid  = null;//保存定时器id
                this.index = 0;//保存当前显示图片的索引(下标)

                this.render();//渲染轮播图到页面
                this.autoplay();
                this.bindevent();
            }

            //给对象添加方法
            render(){ //渲染轮播图到页面
                //循环遍历数据, 将每个数据转换为一个字符串形式的标签, 将每个字符串形式的标签拼接起来 渲染到页面指定的标签中.
                var str = '';
                // for(var i = 0;i < this.data.length;i++){
                //     str += `<img src="${ this.data[i] }" />`;
                // }
                str = this.data.map((item,index)=>{
                    return index == 0 ? `<img class="active" src="${ item }" />` : `<img src="${ item }" />`
                }).join('')

                var str2 = this.data.map((item,index)=>{
                    return index == 0 ? `<span class="active"></span>` : `<span></span>`
                }).join('')


                this.dom.querySelector('.swiper-container').innerHTML = str;
                this.dom.querySelector('.swiper-dot').innerHTML = str2;
            }
            
            autoplay(){ //自动轮播
                this.timerid = setInterval(()=>{
                    //让上一张图 隐藏
                    this.dom.querySelectorAll('.swiper-container img')[this.index].classList.remove('active');
                    //让上一个小圆点 取消高亮
                    this.dom.querySelectorAll('.swiper-dot span')[this.index].classList.remove('active');
                    
                    this.index++;//下标加1, 目的是显示下一张图,让下一个小圆点 高亮
                    if( this.index >= this.data.length ){
                        this.index = 0;
                    }

                    //this.dom.querySelector('.swiper-container img.active').classList.remove('active');
                    //让下一张图 显示
                    this.dom.querySelectorAll('.swiper-container img')[this.index].classList.add('active');
                    //让下一个小圆点 高亮
                    this.dom.querySelectorAll('.swiper-dot span')[this.index].classList.add('active');

                },1000)
            }

            bindevent(){ //绑定事件
                this.dom.onmouseover = ()=>{ //鼠标移入, 停止轮播
                    clearInterval( this.timerid ); 
                }
                this.dom.onmouseout = ()=>{ //鼠标移出, 继续轮播
                    this.autoplay();
                }
            }
        }
    
        //创建轮播图对象
        var arr1 = ['./banner/pic1.jpg','./banner/pic2.jpg','./banner/pic3.jpg','./banner/pic4.jpg']
        var s1 = new Swiper( '.swiper1', arr1)

        
        var arr2 = ['./banner/pic1.jpg','./banner/pic2.jpg']
        var s2 = new Swiper( '.swiper2', arr2)


    </script>
</body>
</html>